<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('2D-scatter')"></head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <!--menu-right-->
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--/outer-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <!--//sub-heard-part-->
                <!--/graph-visual-->
                <div class="graph-visual">

                    <h2 class="inner-tittle">2D散点图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <select id="mydata"></select>
                            <button type="button" id="draw">绘图</button>
                            <table>
                                <thead>
                                <td></td>
                                <td>坐标轴含义</td>
                                <td>数据类型</td>
                                </thead>
                                <tr>
                                    <td>X轴</td>
                                    <td><select class="Axis2D" id="xAxis2D"></select></td>
                                    <td>
                                        <select class="Axis2D-type" id="xAxis2D-type">
                                            <option value="value">value</option>
                                            <option value="category">category</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Y轴</td>
                                    <td><select class="Axis2D" id="yAxis2D"></select></td>
                                    <td>
                                        <select class="Axis2D-type" id="yAxis2D-type">
                                            <option value="value">value</option>
                                            <option value="category">category</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <div id="2D-scatter" style="width: 1000px;height:800px;"></div>
                        </div>
                    </div>
                </div>
                    <!--/graph-visual-->

            </div>
                <!--//outer-wp-->
                <!--footer section start-->
                <footer th:include="/footer :: footer">
                    <!--<p>Copyright &copy; 2018.Panda company</p>-->
                </footer>
                <!--footer section end-->
            </div>
        </div>
        <!--//content-inner-->
        <!--/sidebar-menu-->
        <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
        <div class="clearfix"></div>
    </div>


<script>
    option = {
        color: [
            '#dd4444', '#fec42c', '#80F1BE'
        ],
        legend: {
            y: 'top',
            data: [],
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        grid: {
            x: '10%',
            x2: 150,
            y: '18%',
            y2: '10%'
        },
        xAxis: {
            type: 'value',
            name: '日期',
            nameTextStyle: {
                color: '#000',
                fontSize: 14
            },
            axisLine: {
                lineStyle: {
                    color: '#000'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: 'AQI指数',
            nameTextStyle: {
                color: '#000',
                fontSize: 16
            },
            axisLine: {
                lineStyle: {
                    color: '#000'
                }
            }
        },
        dataset: {
            source:[],
            dimensions:[]
        },
        series: [
            {
                type: 'scatter',
                name:'散点图',
                encode: {
                    x:'date',
                    y:'PM2.5'
                }
            }
        ]
    };


    myChart = echarts.init(document.getElementById("2D-scatter"));
    $("#draw").click(function () {
        var name=$("#mydata").children("option:selected").text()
        var file="/file/152837033820813886777456/"+name;
        $.get(file, function (json) {
            var data=json;
            var title=data[0];
            option.xAxis.name=title[0]
            option.xAxis.type="value";
            option.yAxis.name=title[1];
            option.yAxis.type="value";
            option.dataset.source=data;
            option.dataset.dimensions=data[0];
            option.series[0].encode.x= option.xAxis.name;
            option.series[0].encode.y=option.yAxis.name;
            myChart.setOption(option);

            var content="";
            for(var i=0;i<title.length;i++){
                content+="<option value =\"" + title[i]+ "\">" +title[i]+"</option>"
            }
            $(".Axis2D").append(content);
            $("#xAxis2D").val(option.xAxis.name)
            $("#xAxis2D-type").val("category")
            $("#yAxis2D").val(option.yAxis.name)
            $("#yAxis2D-type").val("value")

            $(".Axis2D").change(function () {
                var name=$(this).children("option:selected").text()
                var index=title.indexOf(name)
                var max=findMax(data,index)
                var min=findMin(data,index)

                if($(this).attr("id")=="xAxis2D"){
                    option.xAxis.name=name;
                    option.series[0].encode.x=option.xAxis.name
                }else if($(this).attr("id")=="yAxis2D"){
                    option.yAxis.name=name;
                    option.series[0].encode.y=option.yAxis.name
                    option.visualMap[0].dimension=index;
                    option.visualMap[0].max=max;
                    option.visualMap[0].min=min;
                    option.visualMap[0].name=name;
                }
                myChart.setOption(option)
            })

            $(".Axis2D-type").change(function () {
                var type=$(this).children("option:selected").text()
                if($(this).attr("id")=="xAxis2D-type"){
                    option.xAxis.type=type;
                }else if($(this).attr("id")=="yAxis2D-type"){
                    option.yAxis.type=type;
                }
                myChart.setOption(option)
            })
        })
    })

    function findMax(data,col) {
        var row=data.length
        var max=data[1][col];
        for(var i=1;i<row;i++){
            if(data[i][col]>max)max=data[i][col];
        }
        return max;
    }
    function findMin(data,col) {
        var row=data.length
        var min=data[1][col];
        for(var i=1;i<row;i++){
            if(data[i][col]<min)min=data[i][col];
        }
        return min;
    }

    $.ajax({
        type: "get",
        url: "listFile",
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            for(var i=0;i<data.length;i++){
                $("#mydata").append("<option value =\"" + data[i]+ "\">" +data[i]+"</option>")
            }
        },
        error: function () {

        }
    });
</script>
</body>
</html>